<%@ page contentType="text/html;charset=UTF-8"%>
<script type="text/javascript">

   $(function(){
	   getNowDate();
	   yw_day_pchstj_search(); 
	   yw_month_pchstj_search();
	  /*  yw_daytb_pchstj_search(); */
 	  // yw_montb_pchstj_search(); 
	  yw_pcsdaytb_pchstj_search();
	  yw_pcsmontb_pchstj_search();
   });
   <!--采集情况当日统计 -->
   function  yw_day_pchstj_search(){
	 //  $.messager.progress({  text : '请稍后....' });
	   var myChart = echarts.init(document.getElementById('yw_day_pchstj_table'));
       myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
       $.ajax({
	         url:'${pageContext.request.contextPath}/yw_pchstj_orcle/facet_day',
	         type:'post',     
	         dataType:'json' ,
	         success:function(result){
	        	 var names=[];//定义两个数组
	        	 var series =[];
	             var data="";
	        	 if (result) {
                     for (i=0;i<result.length;i++) {
                    	    names.push(result[i].name);    //挨个取出类别并填入类别数组
                    	    data=result[i].name;
		                    //data.push(result[i].data);
		                    series.push({"name":data,"type":"bar","data":[result[i].data]});
                     }
                     myChart.hideLoading();    //隐藏加载动画
                     // 显示标题，图例和空的坐标轴
                     myChart.setOption({
                         tooltip : {
                	        trigger: 'item' 
                	     },
                         grid: {
                 	        y: 24,
                 	        y2: 70,
                 	        left: '6%',   //距离左边的距离
                 	        right: '3%' //距离右边的距离
                 	     }, 
                         legend: {
                            itemWidth: 10,
                 	    	itemHeight: 10,
                 	    	textStyle: {
			                        color: 'red'          // 图例文字颜色
			                    },
                 	    	y: 'bottom', 
                            data:names
                         },
                         xAxis: {
                         	 data: ['采集'],
                         	 minInterval: 1,
							 axisLabel: {                           
         	            		show: true,                            
         	            	textStyle: {                             
         	            	   color: 'white'                           
         	            	}
         	            },
         	            	axisLine: {                           
								lineStyle: {                             
								   color: 'white',
								   width:1,
								}
       	                	}
                         },
                         yAxis: {
							  axisLabel: {                           
         	            	show: true,                            
         	            	textStyle: {                             
         	            	   color: 'red'                           
         	            	}
         	            },
         	            axisLine: {                           
	       	            	lineStyle: {                             
	       	            	   color: 'white',
	       	            	   width:1,
	       	            	}
       	                }},
                         series: series
                     });
              }
	    }
	         
	        
	    })
	    
	      
	}
	 <!--本月各县市采集统计-->
	   function  yw_month_pchstj_search(){
		   var myChart = echarts.init(document.getElementById('yw_month_pchstj_table'));
	       myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
	       var names=[];    //类别数组（实际用来盛放X轴坐标值）
	       var data=[];    //销量数组（实际用来盛放Y坐标值）
		   $.ajax({
			    url:'${pageContext.request.contextPath}/yw_pchstj_orcle/month_tj',
			    type:'post',
			    dataType:'json' ,
			    success:function(result){
			    	 var names=[];//定义两个数组
		        	 var series =[];
		             var data="";
		        	 if (result) {
	                     for (i=0;i<result.length;i++) {
	                    	    names.push(result[i].name);    //挨个取出类别并填入类别数组
	                    	    data=result[i].name;
			                    series.push({"name":data,"type":"bar","data":[result[i].data]});
	                     }
	                     myChart.hideLoading();    //隐藏加载动画
	                     // 显示标题，图例和空的坐标轴
	                     myChart.setOption({
	                         tooltip : {
	                	        trigger: 'item' 
	                	     },
	                         grid: {
	                 	        y: 24,
	                 	        y2: 70,
	                 	        left: '6%',   //距离左边的距离
	                 	        right: '3%' //距离右边的距离
	                 	     }, 
	                         legend: {
	                            itemWidth: 10,
	                 	    	itemHeight: 10,
	                 	    	y: 'bottom', 
	                 	    	textStyle: {
			                        color: 'red'          // 图例文字颜色
			                    },
	                            data:names
	                         },
	                         xAxis: {
	                         	 data: ['采集'],
	                         	 minInterval: 1,
								 axisLabel: {                           
         	            			show: true,                            
         	            			textStyle: {                             
         	            	   		color: 'white'                           
         	            		}
         	            },
         	            axisLine: {                           
	       	            	lineStyle: {                             
	       	            	   color: 'white',
	       	            	   width:1,
	       	            	}
       	                }
	                         },
	                         yAxis: {
								  axisLabel: {                           
								show: true,                            
								textStyle: {                             
								   color: 'white'                           
								}
         	            	},
							axisLine: {                           
								lineStyle: {                             
								   color: 'red',
								   width:1,
								}
							}
						},
	                         series: series
	                     });
	              }
			    }
			}) 
		}
 
//日区县采集统计
  function  yw_pcsdaytb_pchstj_search(){
	   	var myChart = echarts.init(document.getElementById('yw_pcsdaytb_pchstj_table'));
	    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
	   // var names=[];    //类别数组（实际用来盛放X轴坐标值）
	   // var data=[];    //销量数组（实际用来盛放Y坐标值）
		   $.ajax({
	         url:'${pageContext.request.contextPath}/yw_pchstj_orcle/qupcs_tj',
	         type:'post',     
	         dataType:'json' ,
	         data:{
	        	 c_mc_1: "1"
	         },
	         success:function(result){
	        	 var names=[];//定义两个数组
                 var data=[];
                 $.each(result,function(key,values){ 
                     names.push(values.name);
                     var obj = new Object();
                     obj.name = values.name;
                     obj.value = values.data;
                     data.push(obj);
                  })            
                 myChart.hideLoading(); 
                 myChart.setOption({
                 	    grid: {
               	          y: 10,
               	          y2: 30
               	        }, 
                 	     tooltip : {
                 	        trigger: 'item',
                 	        formatter: '{b}\n{c}'
                 	    }, 
                 	    legend: {
                 	    	// orient : 'vertical',
                 	    	itemWidth: 10,
                 	    	itemHeight: 10,
                 	    	y: 'bottom', 
                 	    	textStyle: {
			                        color: 'red'          // 图例文字颜色
			                    },
                 	        data:names
                 	    },
                 	   // calculable : true,
                 	    series : [
                 	        {
                 	            name:'采集数',
                 	            type:'pie',
                 	            radius : '66%',
                 	            center: ['50%', '45%'],
                 	            data:data
                 	        }
                 	    ]
                 })
	    }
		      }) 
 }
 
  //月区县采集统计
  function  yw_pcsmontb_pchstj_search(){
	   	var myChart = echarts.init(document.getElementById('yw_pcsmontb_pchstj_table'));
	    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
	   // var names=[];    //类别数组（实际用来盛放X轴坐标值）
	   // var data=[];    //销量数组（实际用来盛放Y坐标值）
		   $.ajax({
	         url:'${pageContext.request.contextPath}/yw_pchstj_orcle/qupcs_tj',
	         type:'post',     
	         dataType:'json' ,
	         success:function(result){
	        	 var names=[];//定义两个数组
                 var data=[];
                 $.each(result,function(key,values){ 
                     names.push(values.name);
                     var obj = new Object();
                     obj.name = values.name;
                     obj.value = values.data;
                     data.push(obj);
                  })            
                 myChart.hideLoading(); 
                 myChart.setOption({
                 	    grid: {
               	          y: 10,
               	          y2: 30
               	        }, 
                 	     tooltip : {
                 	        trigger: 'item',
                 	        formatter: '{b}\n{c}'
                 	    }, 
                 	    legend: {
                 	    	// orient : 'vertical',
                 	    	itemWidth: 10,
                 	    	itemHeight: 10,
                 	    	y: 'bottom', 
                 	    	textStyle: {
			                        color: 'red'          // 图例文字颜色
			                    },
                 	        data:names
                 	        
                 	    },
                 	   // calculable : true,
                 	    series : [
                 	        {
                 	            name:'采集数',
                 	            type:'pie',
                 	            radius : '66%',
                	            center: ['50%', '45%'],
                 	           /*  itemStyle : {
                 	                normal : {
                 	                    label : {
                 	                        show : false
                 	                    },
                 	                    labelLine : {
                 	                        show : false
                 	                    }
                 	                }
                 	            }, */
                 	            data:data
                 	        }
                 	    ]
                 })
	    }
		      }) 
 }
  function getNowDate() {
		 var date = new Date();
		 var sign1 = "-";
		 var year = date.getFullYear() // 年
		 var month = date.getMonth() + 1; // 月
		 var day  = date.getDate(); // 日
		 // 给一位数数据前面加 “0”
		 if (month >= 1 && month <= 9) {
		  month = "0" + month;
		 }
		 if (day >= 0 && day <= 9) {
		  day = "0" + day;
		 }
		 var nowday = year + sign1 + month + sign1 + day;
		// var fristday = getBeforeDate(nowday,1);
		// date.setTime(date.getTime()-24*60*60*1000);
		  date.setDate(1);
		 //获取月份第一天
		 var mons = year+"-" + month + "-" + date.getDate();
		 $("#times1").html(nowday);
	     $("#times2").html(nowday);
	     $("#days1").html(nowday);
	     $("#days2").html(nowday);
	     $("#mons1").html(mons);
	     $("#mons2").html(nowday);
	     $("#mons3").html(mons);
	     $("#mons4").html(nowday);
		}
	 function getBeforeDate(date,n){
		     var n = n;
		     var d = new Date(date);
		     var year = d.getFullYear();
		     var mon=d.getMonth()+1;
	         var day=d.getDate();
		     if(day <= n){
		            if(mon>1) { 
		            	mon=mon-1; 
		            }else {
		            	year = year-1;
		            	mon = 12;
		            }
		       }
	           d.setDate(d.getDate()-n);
	           year = d.getFullYear();
	           mon=d.getMonth()+1;
	           day=d.getDate();
		       s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
		      return s;
		 }
</script>
<div region="center"  data-options="fit:true,border:false,plain:true">
<div class="main" style="" >
  <div class="clearfix" style="padding-left:7px;padding-top:7px;"> 
    <!--  <div class="content2" style="width:33%"> 
         <section> <strong>月同比统计</strong> <hr> 
           <div id="yw_montb_pchstj_table"   style="float:left;width: 100% ;height:570px;"></div>
         </section> 
      </div> -->
    <div class="content" style="width:49%">
      <section class="bg_title1"> <strong><span id="days1"></span>&nbsp;00:00:00 至 <span id="days2"></span>&nbsp;23:59:59 时采集情况统计</strong>
        <hr>
        <div id="yw_pcsdaytb_pchstj_table"   style="float:left;width: 100% ;height:300px;"></div>
      </section>
    </div>
    
    <div class="content2" style="width:49%">
      <section class="bg_title1"> <strong><span id="mons1"></span>&nbsp;00:00:00 至 <span id="mons2"></span>&nbsp;23:59:59 时采集情况统计</strong>
        <hr>
        <div id="yw_pcsmontb_pchstj_table"   style="float:left;width: 100% ;height:300px;"></div>
      </section>
    </div>
    
    <div class="content" style="width:98.8%">
      <section class="bg_title1"> <strong><span id="times1"></span>&nbsp;00:00:00 至 <span id="times2"></span>&nbsp;23:59:59 时采集情况统计 </strong>
        <hr>
        <div id="yw_day_pchstj_table"   style="v;width: 100%;height:280px;"></div>
      </section>
    </div>
    
    <div class="content3" style="width:98.8%;/* background:url('${pageContext.request.contextPath}/images/timg6.jpg') no-repeat center center;*/">
      <section class="bg_title1"> <strong><span id="mons3"></span>&nbsp;00:00:00 至 <span id="mons4"></span>&nbsp;23:59:59 时采集情况统计</strong>
        <hr>
        <div id="yw_month_pchstj_table"   style="float:left;width: 100%;height:280px;" ></div>
      </section>
    </div>
    
    <!--  <div class="content1" > 
         <section> <strong>今天与昨天同比采集上升或下降百分比 </strong> <hr> 
           <div id="yw_daytb_pchstj_table"  style="float:left;width: 702px;height:260px;"></div> 
         </section> 
      </div> --> 
  </div>
</div>
 </div>
<style> 
	 html, body { 
		width: 100%;
		height:100%;
		
	 }  
	 .main{
		 width:100%;
		  height:100%;
		 background:url('${pageContext.request.contextPath}/images/timg6.jpg') no-repeat center center;
		 background-size:100% 100%;
   		background-attachment:fixed;
		
	
		 }
	.content,.content1,.content2,.content3 section { 
		color:#FFF;
        font-size: 15px;
	   text-align:center;
    } 
    .content,.content1,.content2,.content3 strong { 
        font-size: 15px;
	
	 
    } 
   .content,.content1,.content2,.content3 { 
    float: left;
    margin: 6px;
	background:url('${pageContext.request.contextPath}/images/bg_box1.png')  no-repeat ;
	background-size:100% 100%;
	background-position:fixed;
	box-shadow: 2px 2px 4px #bbb, 0px 0px 2px #bbb; 
	
    } 
   
    .sidebar {
      float: left;
      margin: 3px; 
      width: 230px;  
      color: #bbb; 
      box-shadow: 2px 3px 4px #bbb; 
     } 
     .content:after,.content1:after,.content2:after,
     .content3:after .sidebar:after { 
     display: block; 
     position: absolute; 
     content: ""; 
     box-shadow: 2px 2px 4px #bbb; 
     } 
     .content:after { } 
     .sidebar:after { 
     width: 230px; 
     } 
	 .bg_title1{
		 background:url('${pageContext.request.contextPath}/images/bg_title1.png')  no-repeat center 0px ;
		 opacity: 0.8;
		 }
     section, aside { 
     padding: 10px 
     } 
     @media all and (max-width: 840px) { 
     .content,.content1,.content2,.content3  { 
     float: none; margin-bottom: 30px; 
     } 
     .sidebar { 
     float: none;
     margin-right: 0; 
     width: 100%; 
     } 
     .content:after,.content1:after,.content2:after,.content3:after .sidebar:after { 
     display: none 
     } 
     } 
     </style>
